class ClassChildren extends React.Component {
  render() {
    return (
      <div>
        child2
        <button>button</button>
      </div>
    );
  }
}

const FuncChild2 = React.forwardRef(function Child2(props, ref) {
  return (
    <div>
      function Component
      <button ref={ref}>button2</button>
    </div>
  );
});

class Demo extends React.Component {
  child1: ClassChildren | null;
  child2: any;

  render() {
    return (
      <div>
        {/* 当 ref 作用于 类组件的时候， ref 的值 是 类组件的实例 */}
        <ClassChildren ref={(dom) => (this.child1 = dom)} />
        <FuncChild2 ref={(dom) => (this.child2 = dom)} />
      </div>
    );
  }
}

// 检测是否为对象
const isObject = (obj) => {
  return obj !== null && /^(object|function)$/.test(typeof obj);
};

// 浅比较对象的方法
const shallowEqual = (objA, objB) => {
  if (!isObject(objA) || !isObject(objB)) return false;

  if (objA === objB) return true;

  // 比较成员的数量
  const keysA = Reflect.ownKeys(objA),
    keysB = Reflect.ownKeys(objB);

  // 长度不一样默认，return false
  if (keysA.length !== keysB.length) return false;

  // 数量一致，再逐一比较第一级（第一层的属性），浅比较
  for (let i = 0; i < keysA.length; i++) {
    const key = keysA[i];
    // 如果一个对象有一个属性在另一个对象中不存在，或者这个属性两个对象都存在但是值不一样，都视为不相等
    if (!objB.hasOwnProperty(key) || !Object.is(objA[key], objB[key])) {
      return false;
    }
  }

  // 如果以上都处理完，发现没有不相同的成员，则认为两个对象都是相等的（第一层是相等的）
  return true;
};
